<template>
  <div class="itemdiv">
    <router-link :to="url" class="flag">{{ name }}</router-link>
  </div>
</template>

<script>
export default {
  name: "index_item",
  props: {
    url: String,
    name: String
  }
};
</script>

<style scoped>
.itemdiv {
  display: inline-block;
}
.flag {
  margin: 20px;
  width: 200px;
  height: 200px;
  background-color: #e8e7e3;
  line-height: 200px;
  text-align: center;
  font-family: "微软雅黑", "黑体";
  font-size: 42px;
  color: #777777;
  display: inline-block;
  border-radius: 15px;
  overflow: hidden;
  text-decoration: none;
}
.flag:hover {
  background-color: #3f3f3f;
  color: #ffffff;
  font-size: 52px;
  background-image: url("../../assets/img/flagbg.jpg");
}
</style>